<template>
  <section class="map-container">
    <l-map
      ref="map"
      :zoom="zoom"
      :center="center"
      :options="mapOptions"
      @update:center="updateCenter"
      @update:zoom="updateZoom">
      <l-control-layers />
      <l-tile-layer :url="url" :subdomains="'1234'"></l-tile-layer>
      <l-wms-tile-layer
        v-for="layer in layers"
        :key="layer.name"
        :base-url="baseUrl"
        :layers="layer.layers"
        :visible="layer.visible"
        :name="layer.name"
        layer-type="base">
      </l-wms-tile-layer>
      <l-polygon :lat-lngs="polygon.latlngs" :color="polygon.color">
      </l-polygon>
    </l-map>
  </section>
</template>

<script>
import L from 'leaflet'
// import qs from 'qs'

export default {
  name: 'Map',
  data () {
    return {
      zoom: 18,
      center: L.latLng(25.795100032099317, 106.19484543800355),
      mapOptions: {
        zoomSnap: 0.5
      },
      url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
      baseUrl: 'http://139.155.25.6:8081/geoserver/hp/wms',
      layers: [
        {
          name: '影像图层',
          visible: true,
          format: 'image/png',
          layers: 'tiff_hp',
          transparent: true,
          attribution: ''
        }
      ],
      polygon: {
        latlngs: [],
        color: 'yellow'
      }
    }
  },
  mounted () {
    this.mapClick()
  },
  methods: {
    mapClick () {
      let self = this
      self.$refs.map.mapObject.on('click', function (e) {
        self.$refs.map.mapObject.flyTo(e.latlng, 18)
        self.queryFeatureInfo(e.latlng)
      })
    },
    updateCenter (center) {
    },
    updateZoom (zoom) {
    },
    queryFeatureInfo (latlng) {
      let self = this
      // let data = {
      //   SERVICE: 'WMS',
      //   VERSION: '1.1.1',
      //   REQUEST: 'GetFeatureInfo',
      //   FORMAT: 'image/png',
      //   TRANSPARENT: true,
      //   QUERY_LAYERS: 'hp:shapefile_hp',
      //   STYLES: '',
      //   LAYERS: 'hp:shapefile_hp',
      //   exceptions: 'application/vnd.ogc.se_inimage',
      //   INFO_FORMAT: 'application/json',
      //   FEATURE_COUNT: 50,
      //   X: 50,
      //   Y: 50,
      //   SRS: 'EPSG:4326',
      //   WIDTH: 101,
      //   HEIGHT: 101,
      //   BBOX: self.queryRect(latlng.lng, latlng.lat)
      // }
      let params = new URLSearchParams()
      params.append('SERVICE', 'WMS')
      params.append('VERSION', '1.1.1')
      params.append('REQUEST', 'GetFeatureInfo')
      params.append('FORMAT', 'image/png')
      params.append('TRANSPARENT', true)
      params.append('QUERY_LAYERS', 'hp:shapfile_hp')
      params.append('STYLES', '')
      params.append('LAYERS', 'hp:shapfile_hp')
      params.append('exceptions', 'application/vnd.ogc.se_inimage')
      params.append('INFO_FORMAT', 'application/json')
      params.append('FEATURE_COUNT', 50)
      params.append('X', 50)
      params.append('Y', 50)
      params.append('SRS', 'EPSG:4326')
      params.append('WIDTH', 101)
      params.append('HEIGHT', 101)
      params.append('BBOX', self.queryRect(latlng.lng, latlng.lat))
      self.axios.get('http://139.155.25.6:8081/geoserver/hp/wms', {
      // self.axios.get('/api/hp/wms', {
        params: params
      }).then((res) => {
        console.log(res.data)
        if (res.status === 200 && res.data.features.length > 0) {
          let data = res.data.features[0]
          self.setSelectGeometry(data.geometry.coordinates[0][0])
          self.setSelectProperties(data.properties, latlng)
        }
      }).catch((err) => {
        alert(err.message)
      })
    },
    queryRect (lng, lat) {
      let ratio = 0.00054
      let xmin = lng - ratio
      let ymin = lat - ratio
      let xmax = lng + ratio
      let ymax = lat + ratio
      return xmin + ',' + ymin + ',' + xmax + ',' + ymax
    },
    setSelectGeometry (data) {
      let arr = []
      data.forEach((item) => {
        arr.push([item[1], item[0]])
      })
      this.polygon.latlngs = arr
    },
    setSelectProperties (data, latlng) {
      L.popup().setLatLng(latlng).setContent(JSON.stringify(data)).openOn(this.$refs.map.mapObject)
    }
  }
}
</script>

<style scoped>
 .map-container {
   height: calc(100vh);
   width: calc(100vw);
   background: #42b983;
 }
</style>
